<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>Docker自动化部署平台</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/materialize/0.97.0/css/materialize.min.css">
    <link href="/css/icon.css" rel="stylesheet">
    <style type="text/css">
        td {
            text-align: center;
        }

        .spinner {
            margin: 100px auto;
            width: 32px;
            height: 32px;
            position: relative;
        }

        .cube1, .cube2 {
            background-color: #67CF22;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;

            -webkit-animation: cubemove 1.8s infinite ease-in-out;
            animation: cubemove 1.8s infinite ease-in-out;
        }

        .cube2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        @-webkit-keyframes cubemove {
            25% {
                -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
            }
            50% {
                -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
            }
            75% {
                -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
            }
            100% {
                -webkit-transform: rotate(-360deg)
            }
        }

        @keyframes cubemove {
            25% {
                transform: translateX(42px) rotate(-90deg) scale(0.5);
                -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
            }
            50% {
                transform: translateX(42px) translateY(42px) rotate(-179deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
            }
            50.1% {
                transform: translateX(42px) translateY(42px) rotate(-180deg);
                -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
            }
            75% {
                transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
                -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
            }
            100% {
                transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
            }
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/materialize/0.97.0/js/materialize.min.js"></script>
    <script src="/js/detail.js"></script>
</head>
<body style="font-family: 'Roboto', 'Droid Sans Fallback', '微软雅黑';min-height: 100vh;display: flex;flex-direction: column;">

<nav>
    <div class="nav-wrapper">
        <a href="/" class="brand-logo center">Docker自动化部署平台</a>
        <ul class="left hide-on-med-and-down">
            <li><a href="/">首页</a></li>
        </ul>
    </div>
</nav>

<div class="container" style="padding-top: 20px; width: 90%;flex: 1 0 auto;">

    <div class="row">
        <div class="col s12">
            <div class="card">
                <div class="card-content">
                    <span class="card-title red-text">${detail.name}</span>
                    <p>名称：${detail.name}</p>
                    <p>UUID：<span id="text-uuid">${detail.uuid}</span></p>
                    <#if detail.ports??>
                        <p>端口关系：${detail.ports}</p>
                    </#if>
                    <#if detail.imageTag??>
                        <p>镜像Tag：${detail.imageTag}</p>
                    </#if>
                    <#if detail.dockerFilePath??>
                        <p>DockerFile 路径：${detail.dockerFilePath}</p>
                    </#if>
                    <#if detail.dockerFileName??>
                        <p>DockerFile 名字：${detail.dockerFileName}</p>
                    </#if>
                    <#if detail.volume??>
                        <p>数据卷关系：${detail.volume}</p>
                    </#if>
                    <#if detail.url??>
                        <p>GIT地址：${detail.url}</p>
                    </#if>
                    <#if detail.branch??>
                        <p>GIT分支：${detail.branch}</p>
                    </#if>
                    <p>WEBHOOK自动部署地址：<span id="text-uuid">/deploy/deploy/${detail.uuid}</span></p>
                </div>
                <div class="card-action">
                    <p>
                        <a class="btn waves-light waves-effect white-text" id="btn-deploy">部署</a>
                        <a class="btn waves-light waves-effect white-text" id="btn-restart">启动</a>
                        <a class="btn waves-light waves-effect white-text" id="btn-stop">停止</a>
                        <a class="btn waves-light waves-effect white-text" id="btn-remove">删除</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col s12">
            <div class="card">
                <div class="card-content">
                    <span class="card-title grey-text">运行状态</span>
                    <p class="service-status">
                        <span class="green-text"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <table class="hoverable">
        <thead>
        <tr>
            <td>构建ID</td>
            <td>构建时的状态</td>
            <td>镜像ID</td>
            <td>创建时间</td>
            <td>构建耗时</td>
            <td>详情</td>
        </tr>
        </thead>
        <tbody>
        <#list recordList as item>
            <tr>
                <td>${item.id}</td>
                <td>${item.status}</td>
                <#if item.imageId??>
                    <td>${item.imageId}</td>
                <#else>
                    <td>暂时未知</td>
                </#if>
                <#if item.startTime??>
                    <td class="showTime">${item.startTime}</td>
                <#else>
                    <td>暂时未知</td>
                </#if>
                <#if item.endTime??>
                    <td>${item.endTime-item.startTime}/s</td>
                <#else>
                    <td>暂时未知</td>
                </#if>
                <td>
                    <div data="${item.id}" class="btn waves-effect waves-light red lighten-2 log">日志</div>
                    <div data="${item.id}" class="btn waves-effect waves-light red lighten-2 rollback">回滚</div>
                    <div data="${item.id}" class="btn waves-effect waves-light red lighten-2 download">下载</div>
                    <div data="${item.id}" class="btn waves-effect waves-light red lighten-2 remove">删除</div>
                </td>
            </tr>
        </#list>
        </tbody>
    </table>

</div>

<div id="loader-modal" class="modal" style="background-color: transparent; box-shadow: none;">
    <div class="modal-content">
        <div class="spinner">
            <div class="cube1"></div>
            <div class="cube2"></div>
        </div>
    </div>
</div>

<div id="layer-modal" class="modal modal-fixed-footer">
    <div class="modal-content" style="background-color: black; color: #ccc; font-size: 0.9em;">
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
</div>

<div id="alert-modal" class="modal">
    <div class="modal-content">
        <p class="grey-text">提示</p>
        <p class="text-alert"></p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
</div>

</body>
</html>